<div class="layui-body-header">
	<h2>等级管理</h2>
</div>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title fenlei">
    <li class="layui-this" id="-1">所有分类</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
    	
    	
    	
    </div>
    <div class="layui-tab-item">
    	
    	
    </div>
    <div class="layui-tab-item"></div>
    <div class="layui-tab-item"></div>
    <div class="layui-tab-item"></div>
  </div>
</div>


<div class="layui-card-body">
	<div class="layui-fluid">
		<div class="layui-card">
          <div class="layui-card-header">
            <a href="#/layui/addLev" class="layui-btn layui-btn-sm">
              <i class="layui-icon">&#xe654;</i>
              <span>添加</span>
            </a>
          </div>
          <div class="layui-card-body" >
            <table id="test" lay-filter="test"></table>
            <script type="text/html" id="bartest">
              <a class="layui-btn layui-btn-xs" lay-event="detail">编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
          </div>
        </div>
      </div>
    </div>
      
      

<!--<script type="text/html" id="search_tpl_hash">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">等级类型</label>
      <div class="layui-input-block">
        <select name="leixing" id="leixing">
          <option value="-1">全部</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formtest"><i class="layui-icon">&#xe615;</i> 搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script>-->


<script src="../../api/api.js" type="text/javascript" charset="utf-8"></script>

<script>
	let checkedArr = [];
//	let batchDel = document.querySelector(".batchDel");
//	选中当前行的信息数组
	let objArr = [];
	let fenlei = document.querySelector(".fenlei");
	let tabsId = -1;
	
  layui.config({
    base: '/src/js/'
  }).use(['jquery', 'mockjs', 'table', 'sidebar', 'form' , 'element'], function () {
    var $ = layui.jquery,
      layer = layui.layer,
      table = layui.table,
      sidebar = layui.sidebar,
      form = layui.form;
      element = layui.element;
      renderForm();
      
      DBHelper.GetA("Admin_Xn_RankCategory",function(data){
      	data.forEach((el,index)=>{
      		let li = document.createElement("li")
	      	li.innerText = el.Name;
	      	li.setAttribute("id",el.Id)
      		fenlei.appendChild(li)
      	})
      	renderForm()
      },function(data){
      	console.log(2,data)
      })
      
//    element.tabChange("docDemoTabBrief", layid);
      
      element.on('tab(docDemoTabBrief)', function(data){
	    console.log(this.id);
	    tabsId = this.id;
	    table.reload('test', {
				url: 'https://xnsmb.xnsoft.net.cn/api/GetXn_RankByCategoryId?id='+this.id
            });
	  });
      
      
    // 注入mock
//  layui.mockjs.inject({
//    'POST /demo/table/user': {
//      code: 0,
//      msg: "xxx",
//      count: 1000,
//      'data|20': [{
//        'id|+1': 1,
//        username: '@name',
//        sex: '@boolean',
//        city: '@city',
//        sign: '@csentence',
//        experience: '@integer',
//        score: '@integer',
//        classify: '@word',
//        wealth: '@integer',
//        auth: '@boolean'
//      }]
//    }
//  });
    //第一个实例
    table.render({
      method: 'get',
      // size: 'sm',
      limit: 100,
      elem: '#test',
      id:'test',
      height: 'full-235',
      url: 'https://xnsmb.xnsoft.net.cn/api/GetXn_RankByCategoryId?id='+tabsId, //数据接口
      parseData: function(res){
      	return {
      		'code':0,
      		
      		"data":res
      	};
      },
      done:function(res,curr,count){
      	hoverOpenImg();
      },
//    page: true, //开启分页
      cols: [
        [ //表头
           {
            field: 'CategoryId',
            title: '等级类型',
            align: 'center',
            templet:function(d){
            	if(d.CategoryId==0){
            		return '<span>会员等级</span>'
            	}else if(d.CategoryId==1){
            		return '<span>分会</span>'
            	}else if(d.CategoryId==2){
            		return '<span>商脉圈</span>'
            	}else if(d.CategoryId==3){
            		return '<span>兴趣圈</span>'
            	}else if(d.CategoryId==4){
            		return '<span>分会角色</span>'
            	}else if(d.CategoryId==5){
            		return '<span>商脉角色</span>'
            	}
            }
//          width: 200
          },{
            field: 'Name',
            title: '等级名称',
            align: 'center',
//          width: 200
          }, {
            field: 'Score',
            title: '积分满足点',
            align: 'center',
//          width: 200,
            sort: true
          }, {
            field: 'Images',
            title: '等级图标',
            align: 'center',
            templet:'<div><img src="{{ d.Images}}" style="width:25px;height:25px"></div>',
//          width: 200
          }, {
            field: 'IsDefault',
            title: '是否为默认等级',
            align: 'center',
            templet:function(d){
            	if(d.IsDefault==0){
            		return '<span>否</span>'
            	}else if(d.IsDefault==1){
            		return '<span>是	</span>'
            	}
            }
//          width: 177
          },{
            fixed: 'right',
//          width: 180,
            align: 'center',
            toolbar: '#bartest'
          }
        ]
      ]
    });
    

//		批量添加到checkbox数组
		table.on('checkbox(test)', function(obj){
//		  console.log("obj.checked",obj.checked); //当前是否选中状态
//		  console.log("obj.data",obj.data); //选中行的相关数据
//		  console.log("obj.type",obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
			console.log(obj.data)
			if(obj.type=="one"){
				if(obj.checked){
					objArr.push(obj)
					checkedArr.push(obj.data.Guid)
					console.log(objArr)
				}else if(!obj.checked){
					objArr.splice(objArr.indexOf(obj.data),1)
					checkedArr.splice(checkedArr.indexOf(obj.data.Guid),1)
					console.log(objArr)
				}
			}
		
		});
		
		function hoverOpenImg(){
			$('td img').hover(function(){
            //alert($(this).attr('src'));
            var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:130px;height:130px' />";
//          '<div><img src="{{ d.Images}}" style="width:25px;height:25px"></div>'
            img_show = layer.tips(img, this,{
                tips:[2, 'rgba(41,41,41,.5)']
                ,area: ['160px']
            });
        },function(){
            layer.close(img_show);
        });
		}

//  $('#search_hash').on('click', function () {
//    var that = this;
//    // console.log($('#search_tpl_hash').html());
//    sidebar.render({
//      elem: that,
//      content: $('#search_tpl_hash').html(),
//      title: '搜索',
//      shade: true,
//      // shadeClose:false,
//      // direction: 'left'
//      // dynamicRender: false,
//      // url: 'views/member/all/search.html',
//      width: '500px', //可以设置百分比和px
//      done: function () {
//        console.log('ccc');
//        form.render();
//        
//        DBHelper.Get("Admin_Xn_RankCategory",function(data){
//        	console.log("data",data)
//        	data.forEach((el,index)=>{
//        		$("#leixing").append("<option value='"+el.Id+"'>"+el.Name+"</option>");
//        	})
//        	
//        	form.render();
//        })
//			
//        //监听提交
//        form.on('submit(formtest)', function (data) {
//          // layer.msg(JSON.stringify(data.field));
//          table.reload('test', {
////            where: {
////            	id:$("select[name='leixing'] option:selected").val()
////            }
//				url: 'https://xnsmb.xnsoft.net.cn/api/GetXn_RankByCategoryId?id='+$("select[name='leixing'] option:selected").val()
//          });
//          return false;
//        });
//      }
//    });
//  });
    
    table.on('tool(test)',function(obj){
    	toolHandel("#/layui/addLev?id=","Admin_Xn_Rank/",obj);
    })
    
    
    
//  批量删除
//  batchDel.addEventListener("click",function(){
//  	batDel("Admin_Xn_Rank/",checkedArr,objArr)
//  	
//  })
    
//  batchDel.addEventListener("click",function(){
//			layer.confirm('确认删除？', function(index){
//					layer.close(index);	
//					console.log("checkedArr",checkedArr)
//					DBHelper.Delete("Admin_Xn_Rank",checkedArr,function(data){
//				      	console.log(data)
//				      },function(data){
//				      	table.reload('test', {
//								});
//				      	console.log(data)
//				      })
//					
//		    });
//			
//  })
//  
    
    function renderForm(){
		  layui.use('form', function(){
		   var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
		   form.render();
		  });
		}
    
    
    
  });
</script>




<style scoped>
      	.title{
      		margin-left: 30px;
      		margin-top: 30px;
      	}
      	.memLevBtn{
      		margin-left: 15px;
      		margin-top: 10px;
      		
      	}
      	.memLevBtn button{
      		border-radius: 5px;
      	}
      	
      </style>